<script>
import * as echarts from 'echarts'
export default {
  name: "EchartsExamplePage",
  data() {
    return {
      categoryData:['华为手机','小米手机','苹果手机','联想手机','OPPO手机'],
      seriesData:[
        {
          name: '2022年销量',
          type: 'bar',
          data: [8888,7777,6666,3333,5555]
        },
        {
          name: '2023年销量',
          type: 'bar',
          data: [9999,6666,5555,4444,7777]
        }
      ]
    }
  },
  methods:{
    //定义一个刷新数据到图表的函数
    refreshDataToEcharts(){
      //1.找到图标容器
      const myChart = echarts.init(document.getElementById('my-chart'), 'dark')
      //2.创建图表配置(必填的配置有三个：x轴，y轴，系列）
      const option = {
        title:{
          text:'商品的销量排行榜'
        },
        legend:{
          data:[this.seriesData[0].name, this.seriesData[1].name]
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'shadow'
          }
        },
        xAxis: {
          type:'category',
          data:this.categoryData
        },
        yAxis: {
          type: "value",
        },
        series: this.seriesData
      }
      //3.设置配置
      myChart.setOption(option)
    },
    //处理用户切换标签页的回调函数
    handleTabClick(tab) {
      if(tab.name == 'echartsView'){
        this.refreshDataToEcharts()
      }
    }
  }
}
</script>

<template>
<div>
  <el-card style="width: 1000px; margin: 20px auto">
    <div slot="header">
      <span>数据统计</span>
    </div>
    <div>
      <el-tabs @tab-click="handleTabClick">
        <el-tab-pane label="表格视图" name="tableView">
          假设这里有一个表格
        </el-tab-pane>
        <el-tab-pane label="可视化视图" name="echartsView">
          <div id="my-chart" style="width: 800px;height: 600px"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</div>
</template>

<style scoped>

</style>